<template>
	<view class="warp">
		<top-nav title=""></top-nav>
		<view class="icon">
			<view class="icon-content">B</view>
		</view>
		<view class="title">
			创建钱包
		</view>
		<view class="desc">
			您将会拥有身份下的多链钱包，比如USDT、AGT<br>
			ETH…
		</view>
		<view class="input">
			<view class="list">
				<view class="label">账户昵称</view>
				<view class="input-content">
					<u-input type="text" v-model="name" :custom-style="inputClass" placeholder="请输入账号" />
				</view>
			</view>
			<view class="list">
				<view class="label">新密码</view>
				<view class="input-content">
					<u-input type="password" v-model="password" :custom-style="inputClass" placeholder="请输入密码" />
				</view>
			</view>
			<view class="list">
				<view class="label">确定密码</view>
				<view class="input-content">
					<u-input type="password"  v-model="password2" :custom-style="inputClass" placeholder="请重新输入新密码" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<my-button @clickFun="clickFun">确定</my-button>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="requireShow" :content="requireContent"></u-modal>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import button from './components/button.vue';
	import md5Libs from "uview-ui/libs/function/md5";
	export default{
		data(){
			return{
				name:'',
				password:'',
				password2:'',
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				requireShow: false,
				requireContent: '',
			}
		},
		components:{
			'topNav':topNav,
			'myButton': button
		},
		methods:{
			clickFun(){
				if(!this.name){
					this.$refs.uToast.show({
						title: '请输入账号',
						type: 'error',
					})
					return false
				} else if(!this.password){
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error',
					})
					return false
				}
				if(this.password2!=this.password){
					this.$refs.uToast.show({
						title: '确认密码不正确',
						type: 'error',
					})
					return false
				}
				const params = {
					name:this.name,
					password:md5Libs.md5(this.password),
					checkPassword:md5Libs.md5(this.password2),
					clientId: getApp().globalData.clientid
				}
				this.$u.post('/api/CreateWallet', params).then(res=>{
					if(res.code==200){
						uni.setStorageSync('accoutInfo',params);
						uni.setStorageSync('account_id',res.data.account_id);
						uni.setStorageSync('master_key',res.data.master_key)
						uni.navigateTo({
						    url: '/pages/login/step4'
						});
					} else {
						this.requireShow=true;
						this.requireContent=res.message;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		padding: 0 26*2rpx;
		.icon{
			width: 78*2rpx;
			height: 78*2rpx;
			background: linear-gradient(225deg, rgba(255, 220, 94, 1), rgba(101, 255, 93, 1), rgba(255, 220, 94, 1));
			box-shadow: 0px 0px 4*2rpx 0px rgba(141, 180, 255, 0.5);
			border-radius: 50%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			margin:40*2rpx auto 60*2rpx;
			.icon-content{
				width: 74*2rpx;
				height: 74*2rpx;
				background-color: #111111;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 48*2rpx;
			}
		}
		.title{
			font-size:24*2rpx;
			margin-bottom:18*2rpx;
		}
		.desc{
			font-size:14*2rpx;
			opacity: 0.5;
			margin-bottom:50*2rpx;
		}
		.input{
			margin-bottom:130*2rpx;
			.list{
				margin-bottom:30*2rpx;
				.label{
					font-size:14*2rpx;
					opacity: 0.5;
				}
			}
		}
		.bottom{
			height:110*2rpx;
			background-color: #202020;
			width: 100%;
			bottom: 0;
			position: fixed;
			left:0;
	
		}
	}
</style>
